<template>
    <div id="app" ref="app">
        <div class="tableTitle">
            <table class="tableTitleStyle">
            <tr>
                <td :class="{'itemSelected':this.$store.state.sportPage}">
                    <div class="tableTitleName" @click="goSport">课程管理</div>
                </td>
                <td>
                    <div class="tableTitleName" style="color: #eee">|</div>
                </td>
                <td :class="{'itemSelected':this.$store.state.shufflingPage}">
                    <div class="tableTitleName" @click="goShuffling">轮播图管理</div>
                </td>
            </tr>
            </table>
        </div>
        <br>
        <router-view class="child-view"></router-view>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'app',
    async created() {
        let uploadValue = await axios.get('static/upload-config.json')
        this.$store.commit('SET_uploadUrl', uploadValue.data.uploadUrl + '/sport/admin/uploadPicture')
        // console.log()
        let courseTags = await axios.get('static/course-tags.json')
        // console.log(courseTags.data.courseTags)
        this.$store.commit('SET_courseTag', courseTags.data.courseTags)
        // this.$store.commit('SET_tagList', courseTags.data.courseTags.shift())
    },
    // data() {
        // return {
        //     sportPage: true,
        //     shufflingPage: false
        // }
    // },
    methods: {
        goShuffling() {
            this.$store.commit('SET_shufflingPage', true)
            this.$store.commit('SET_sportPage', false)
            console.log('called goshufff')
            this.$router.push({
                path: '/shufflingManage'
            })
        },
        goSport() {
            this.$store.commit('SET_shufflingPage', false)
            this.$store.commit('SET_sportPage', true)
            // this.$store.state.sportPage = true
            // this.$store.state.shufflingPage = false
            console.log('called goSportf')
            this.$router.push({
                path: '/sportTable'
            })
        }
    }
}
</script>
<style lang="less">
::-webkit-scrollbar{
    display:none;
}
body {
    background-color: #F8F8F8;
    padding: 20px;
}
#app {
    font-size: 14px;
    background-color: #FFFFFF;
    padding: 20px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: inline-block;
    // min-width: 1000px;
    // max-width: 99%;
}
.itemSelected {
    color: #2d8cf0;
    border-bottom: 2px solid #2d8cf0;
}
.tableTitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    .tableTitleStyle {
        border-collapse:collapse;
        width: 250px;
        height: 50px;
        text-align: center;
        .tableTitleName {
            font-size: 20px;
            font-weight: bold;
            // padding: 0 0 10px 0;
        }
    }
}
tr {
    cursor: pointer;
}
:-moz-placeholder, { /* Mozilla Firefox 4 to 18 */
    color: #999; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;opacity:1;
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder{
    color: #999;opacity:1;
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color: #999;opacity:1;
}
.ivu-collapse-header {
    background-color: #FFFFFF !important;
}
.ivu-collapse-content {
    padding: 0 !important;
    margin-top: -25px !important;
}

.ivu-table-cell {
    div {
        a {
            padding-left: 15px;
            cursor: pointer;
            user-select:none;
        }
    }
    & {
        padding: 5px;
    }
}
.ivu-modal-header-inner {
    color: #999;
}
</style>
